<template>
	<statusBarVue :title="pageTitle" :isShowBar="true" :isShowLeft="true" />

	<view class="article-list-page" :style="pageHaveBarStyle">
		<view class="article-list-page-group">
			<view v-if="articleList.length" class="article-list-page-list">
				<view v-for="(item,index) in articleList" :key="index" class="article-list-page-item">
					<!-- 内容 -->
					<view class="contents"
						@click.stop="goToPage('https://shuidianbang.net/web_app/article/' + item.id)">
						<view class="tit">
							<text class="text">{{item.title}}</text>
							<view class="time">
								{{ handleTimeStrToTimeStamp(item.ts)  }}
							</view>
						</view>
						<view class="img-con">
							<image src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/5c09f5c9-6fa8-4b4c-a975-49f8019c0d7e.jpg"></image>
						</view>
						<!-- <view class="content" v-html="item.txt_content"></view> -->
					</view>
				</view>
			</view>
			<emptyVue v-else />
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';
	import emptyVue from '@/components/empty.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	import {
		publics
	} from '@/mixins/publics.js';

	import {
		getArticlesLocal,
		getArticlesMii,
	} from "@/utils/api"

	export default {
		mixins: [publics, MescrollMixin],
		components: {
			statusBarVue,
			emptyVue
		},
		data() {
			return {
				pageTitle: '',
				type: '',
				articleList: []
			}
		},
		onShareAppMessage(){
			// 监听用户右上角的转发
		},
		onShareTimeline(){
			// 监听用户右上角的分享到朋友圈
		},
		onLoad(options) {
			if (options.pageTitle) {
				this.pageTitle = options.pageTitle;
				this.type = options.type;
			}
		},
		onShow() {
			if (this.type === 'local') {
				this.getArticlesLocalApi()
			} else if (this.type === 'mii') {
				this.getArticlesMiiApi()
			}
		},
		methods: {
			// 本地热点 更多
			getArticlesLocalApi() {
				getArticlesLocal().then(res => {
					if (res.code === 200) {
						this.articleList = res.data.docs;
					}
				})
			},

			// 退役军人专区 更多
			getArticlesMiiApi() {
				getArticlesMii().then(res => {
					if (res.code === 200) {
						this.articleList = res.data.docs;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.article-list-page {
		position: relative;
		left: 0;
		right: 0;
		z-index: 99;
		overflow: auto;
		background: linear-gradient(to bottom, transparent 0%, #F5F6FA 20%, #F5F6FA 100%);

		&-group {
			width: 94.67vw;
			margin: auto;
			position: relative;

			.article-list-page-list {
				width: 100%;
				height: 100%;
				// position: absolute;
				// overflow: auto;
			}

			.article-list-page-item {
				background-color: #fff;
				margin-bottom: 10px;
				padding: 12px;
				border-radius: 10px;
			}



			.contents {
				display: flex;
				justify-content: space-between;

				.tit {
					font-weight: bold;
					font-size: 16px;
					color: #1E1F23;
					// line-height: 25px;
					// margin-bottom: 4px;
					// border-bottom: 1px solid #ccc;
					// padding-bottom: 5px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.time {
						font-size: 14px;
						font-weight: normal;
						color: #8e8a8a;
					}
				}

				.img-con {
					width: 220rpx;
					height: 154rpx;
					border-radius: 12rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.content {
					font-weight: 400;
					font-size: 14px;
					color: #1E1F23;

					.content-img {
						width: 100px;
						height: 100px;
						border-radius: 4px;
						margin-right: 4px;

					}
				}
			}
		}

		.empty {
			box-sizing: border-box;
			width: 100%;
			padding: 100rpx 50rpx;
			text-align: center;

			&-img {
				width: 280rpx;
				height: 280rpx;
			}

			&-text {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: gray;
			}
		}
	}
</style>